<template>
	<view>
		<navbar title="确认订单"></navbar>
		<view class="con">
			<view class="box u-flex u-flex-y-center">
				<image src="/static/addr/addr.png" class="box__addricon" mode=""></image>
				<view class="" style="flex: 1;">
					<view class="box__addr">
						江东中路三段禾瑞源小区3栋一单元
					</view>
					<view class="box__name">
						周晓晓 16285542255
					</view>
				</view>
				<image src="/static/addr/fanhui.png" class="box__m" mode=""></image>
			</view>
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<image src="/static/logo.png" class="box__pic" mode="aspectFill"></image>
					<view class="">
						<view class="box__proname">
							家用充电桩安装
						</view>
						<view class="box__num">
							数量 × 1
						</view>
						<view class="box__price">
							180.0
						</view>
					</view>
				</view>
				<u-line color="rgba(233, 234, 236, .79)" margin="23rpx 0 0"></u-line>
				<view class="" style="padding: 20rpx 0 0;">
					<view class="box__item">
						<view class="box__item__label">
							服务费用
						</view>
						<view class="box__item__val">
							￥50.0
						</view>
					</view>

					<view class="box__item">
						<view class="box__item__label">
							数量
						</view>
						<view class="box__item__val">
							<text style="font-size: 20rpx;">× </text> 1
						</view>
					</view>
					<view class="box__item">
						<view class="box__item__label">
							期望上门时间
						</view>
						<image src="/static/my/more.png" class="box__item__m" mode=""></image>
					</view>
					<view class="box__item">
						<view class="box__item__label">
							优惠券
						</view>
						<image src="/static/my/more.png" class="box__item__m" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box__title">
					需求填报<text style="font-weight: normal;"> (客户可根据需求自行上传图片)</text>
				</view>
				<view class="" style="padding: 0 20rpx;">
					<u--textarea v-model="value1" border='none' placeholder="请描述您遇到的问题"></u--textarea>
					<view class="" style="margin-top: 20rpx;">
						<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
							:maxCount="9" width="160rpx" height="160rpx">
							<image src="/static/addr/up.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box__pay">
					<view class="box__pay__label">
						支付方式
					</view>
					<view class="box__pay__name">
						微信支付
					</view>
					<image src="/static/addr/wx.png" class="box__pay__icon" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="">
				合计: <text class="footer__price">230.00</text>
			</view>
			<u-button icon="/static/homey/sd.png" :customStyle="{width:'254rpx',height:'77rpx',padding:0,fontSie:'30rpx',margin:0,}" shape='circle' color="#ff6934" text="立即结算"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				value1: '',
				fileList6: []
			};
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 11rpx 30rpx 150rpx;

		.box {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 30rpx 0;
			margin-bottom: 30rpx;

			&__addricon {
				width: 36rpx;
				height: 40rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #232323;
				line-height: 30rpx;
				margin-bottom: 22rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #727272;
				line-height: 26rpx;
			}

			&__m {
				width: 17rpx;
				height: 25rpx;
				margin-right: 34rpx;
			}

			&__pic {
				width: 168rpx;
				height: 168rpx;
				background: #896CAD;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 0 20rpx;
			}

			&__proname {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #2A2C2C;
				line-height: 48rpx;
			}

			&__num {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}

			&__price {
				font-family: DINNextLTPro, DINNextLTPro;
				font-weight: bold;
				font-size: 38rpx;
				color: #FD3C33;
				line-height: 48rpx;
				margin-top: 32rpx;

				&::before {
					content: "￥";
					font-size: 24rpx;
				}
			}

			&__item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 23rpx;
				height: 80rpx;

				&__label {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 25rpx;
					color: #1E1E1E;
					line-height: 25rpx;
				}

				&__val {
					font-weight: bold;
					font-size: 28rpx;
					color: #1E1E1E;
				}

				&__m {
					width: 13rpx;
					height: 23rpx;
				}
			}

			&__title {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #010A0A;
				line-height: 46rpx;
				margin-left: 20rpx;
				margin-bottom: 10rpx;
			}
			&__pay{
				display: flex;
				align-items: center;
				padding: 15rpx 26rpx;
				margin-bottom: 12rpx;
				&__label{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 27rpx;
					color: #010000;
					line-height: 27rpx;
					flex: 1;
				}
				&__name{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 27rpx;
					color: #010000;
					line-height: 27rpx;
					
				}
				&__icon{
					width: 41rpx;
					height: 41rpx;
					margin-left: 15rpx;
				}
			}
		}
	}

	::v-deep.u-textarea {
		background-color: #F8F8F8 !important;
	}
	.footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		padding: 0 30rpx 0 50rpx;
		height: 126rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		line-height: 26rpx;
		&__price{
			font-size: 36rpx;
			color: #FD3C33;
			font-weight: bold;
			&::before{
				content: "￥";
				font-size: 26rpx;
			}
		}
	}
</style>